<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>我的用户</title>
	<%@ include file="../lib/vue/vue_common.jsp"%>
	<link rel="stylesheet" href="${ctx}/page/lib/vue/css/mescroll.min.css"/>
	<link rel="stylesheet" href="${ctx}/page/member/css/fans.css?v=${version}"/>
	<script type="text/javascript" src="${ctx}/page/lib/vue/js/mescroll.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${ctx}/page/lib/other/css/main.css" />
</head>
<body>
<div id="app" v-cloak>
	<div id="mescroll" class="mescroll">
		<div class="padding text itemB">当前用户数：<span class="text-red">${fans}</span></div>
		<div class="border border-big bg-silver"></div>
		<div id="dataList">
				<div v-for='item in records'>
					<div class="padding border-bottom itemB line" >
						<div class="xs2 height margin-top">
							<img :src="item.avatar" width="40" class="border-big border-red radius-circle">
						</div>
						<div class="line xs10">
							<div class="xs6 padding-left height padding">
								<span class="text-small">昵称：{{item.name}}</span>
								<br>
								<span class="text-small">ID：{{item.cardNo}}</span>
								<br>
							</div>
							<div class="xs5  height padding-top pull-right">
								<span class="text-small">状态：
									<template v-if="item.followStatus==0">未关注</template>
									<template v-if="item.followStatus==1">已关注</template>
								</span>
								<br>
								<span class="text-small">日期：{{item.registerTime | format("yyyy-MM-dd")}}</span>
							</div>
						</div>
					</div>
				</div>
	    </div>
	</div>
</div>

		<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				records:null,
				mescroll: null,
			},
			methods: {
				upCallback: function(page) {
					var self = this;
					getListDataFromNet(page.num, page.size, function(data) {
						if(page.num == 1) self.records = [];
						self.records = self.records.concat(data);
						self.balance = data.balance;
						self.mescroll.endSuccess(data.length);
					}, function() {
						self.mescroll.endErr();
					});
				}
			},
			mounted: function() {
				//Page@Start
				var self = this;
				self.mescroll = new MeScroll("mescroll", {
					down: {
						auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
					},
					up: {
						auto: true, 
						callback: self.upCallback, //上拉回调
						page:{size:20},
						empty:{ //配置列表无任何数据的提示
							warpId:"dataList",
						}
					},
				});
				//Page@End
			},
		});
		function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
          	axios.get("getFansData.do", {
				params: {
					pageIndex: pageNum, //页码
					pageSize: pageSize, //每页长度
				}
			}).then(function(response) {
               	successCallback&&successCallback(response.data.items);//成功回调
			}).catch(function(error) {
				errorCallback&&errorCallback()//失败回调
			});
		}
		</script>
</body>
</html>